<template>
  <div class="clickData-page">
    <!-- 搜索条件 -->
		<AreaWarp :padding="true">
      <SearchWarp :label="'产品'">
        <el-input v-model.trim="searchInfo.productName"  placeholder="请输入产品"></el-input>
      </SearchWarp>
      <SearchWarp :label="'时间'">
          <el-date-picker v-model="searchInfo.time" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" :editable="false"></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>


    <!-- 搜索结果->数据明细 -->
        <AreaWarp :padding="false">
      <AreaTitleWarp :title="'数据明细'">
        <el-button type="primary" icon="el-icon-download" @click="dataExport">导出</el-button>
      </AreaTitleWarp>
      <el-table :data="tableInfo.list" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark">
        <el-table-column prop="time" label="时间" min-width="120" :formatter="formatter_time"></el-table-column>
        <el-table-column prop="productName" label="产品" min-width="120"></el-table-column>
        <el-table-column prop="PV" label="PV" min-width="120"></el-table-column>
        <el-table-column prop="UV" label="UV" min-width="120"></el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper" class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </AreaWarp>

  </div>
</template>
<script>
import ClickData from "../../../assets/js/clickData.js";
export default {
  data() {
    return {
      searchInfo: {
        product: "",
        time: "",
        page: 1,
        size: 20
      },
      loading: false,
      tableInfo: {
        list: [],
        total: 0
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;

      let x = {
        that: that,
        productName: that.productName,
        time: that.time,
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };

      let clickData = new ClickData(x);

      let reqData = clickData.getState();

      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }

      that.loading = true;
      that.ajaxJson({
        url: "/loan/clickList",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    reset() {
      let that = this;
      that.searchInfo = {
        product: "",
        time: "",
        page: 1,
        size: 20
      };
      that.search();
    },
    dataExport() {
      let that = this;
      that.ajaxJson({
        url: "/loan/clickExport",
        success:function(res){}
      });
    }
  }
};
</script>
<style lang="less">
.clickData-page {
  .inputWidth {
    width: 120px;
  }
}
</style>
